import { PROJECT_PREFIX } from '../../types/constants'

export function styles(className: string) {
  return `
  .${className} {
    display: flex;
    flex-direction: column;
    gap: 8px;

    /* 标签样式 */
    .checkbox-label {
      display: block;
      margin-bottom: 6px;
      font-size: 14px;
      color: var(--${PROJECT_PREFIX}-theme-text-secondary);
      ${({ labelTextPosition }: { labelTextPosition: string }) =>
          labelTextPosition === 'right'
            ? 'text-align: right;'
            : labelTextPosition === 'center' ? 'text-align: center;' : ''
      }
    }

    /* 选项容器 */
    .checkbox-options {
      display: flex;
      flex-direction: row;
      gap: 6px;
      
      @media (max-width: 768px) {
        flex-direction: column;
        gap: 0;
      }
    }

    /* 单个选项 */
    .checkbox-item {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 4px 8px;
      cursor: pointer;
      flex-direction: row;

      /* 禁用状态 */
      &.disabled {
        opacity: 0.6;
        cursor: not-allowed;
      }

      input[type="checkbox"] {
        margin: 0;
        width: 16px;
        height: 16px;
        accent-color: #2196F3;

        /* 选中时显示自定义样式 */
        &:checked ~ .custom-checkbox {
          background: var(--${PROJECT_PREFIX}-theme-checkbox-bg-checked);
          border-color: var(--${PROJECT_PREFIX}-theme-checkbox-border-checked);

          &:after {
            display: block;
          }
        }

        /* 聚焦状态 */
        &:focus ~ .custom-checkbox {
          box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
        }
      }

      /* 选项文本 */
      .checkbox-label-text {
        font-size: 13px;
        color: var(--${PROJECT_PREFIX}-theme-text-secondary) !important;
      }
    }
  }
`
}
